﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .ibox {
            margin-bottom: 0px;
        }

         /*.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
        .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
        .btn-group,.ibox-content,.panel-body {
            border-style: solid;
            border-width: 1px;
            border-color: #000;
        }*/ 

        .ibox {
            padding-top: 0px;
        }

        .laber {
            padding-left: 0px;
            padding-right: 0px;
            margin-top: 26px;
        }

        .select {
            padding-left: 0px;
            padding-right: 0px;
            margin-top: 18px;
            
        }

        .btm {
            padding: 0px;
        }
        td {
            padding:0px;
            
        }
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>查询条件</strong>
                </div>
                <div class="panel-body btm">
                    <div class="col-sm-12" style="margin-bottom:0px;">
                        <div class="form-group col-sm-2">
                            <label class="col-xs-2 control-label laber">部门:</label>
                            <div class="col-xs-10 select">
                                <select class="form-control" name="Department" id="Department">
                                    <option value="0">部门</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-sm-2">
                            <label class="col-xs-3 control-label laber">公司人员:</label>
                            <div class="col-xs-9 select">
                                <select class="form-control" name="Staff" id="Staff">
                                    <option value="">公司人员</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-sm-2">
                            <label class="col-xs-2 control-label laber">月份:</label>
                            <div class="col-xs-10 select">
                                <select class="form-control" name="Month" id="Month">
                                    @for (int i = 0; i < 6; i++)
                                    {
                                        <option value="@DateTime.Now.AddMonths(-i).ToString("yyyy-MM-dd")">@DateTime.Now.AddMonths(-i).ToString("MM月")</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <button id="Search" name="Search" type="button" class="btn btn-primary" style="margin-top: 18px;">
                            查询
                        </button>
                    </div>
                </div>

            </div>
            <div class="ibox-content">
                <table id="table" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>  

    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script type="text/javascript" src="~/Scripts/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>
    <script type="text/javascript">
         $(function () {
             initTable();
         });
         var $table = $('#table');
         function initTable() {
             $table.bootstrapTable({
                 url: '/Organization/OutSide/IndexAsync',            //数据来源地址
                 method: 'post',                     //数据请求方式
                 striped: true,                      //是否显示行间隔色
                 cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                 pagination: true,                   //是否启用分页
                 sidePagination: 'server',           //在服务器端分页
                 queryParams: queryParams,           //传递参数
                 pageNumber: 1,                      //初始化加载第一页，默认第一页
                 pageSize: 20,                       //每页的记录行数（*）
                 pageList: [10, 20, 30, 40, 50],     //可供选择的每页的行数（*）
                 clickToSelect: true,                //是否启用点击选中行
                 //toolbar: "#tableToolBar",
                 height: getHeight(),
                 columns: [{
                     width: 38,
                     field: 'selected',
                     checkbox: true,
                 }, {
                     title: '行号',
                     align: 'center',
                     width:50,
                     formatter: function (value, row, index) { return index + 1; }
                 }, {
                     field: 'createdTime',
                     title: '日期',
                     align: 'center',
                     width:'100px'
                 }, {
                     field: 'number',
                     title: '打卡次数',
                     align: 'center',
                     width: '60px',
                     formatter: NumberFormatter
                 }, {
                     field: 'imagePage',
                     title: '定位照片',
                     align: 'center',
                     formatter: ImageListFormatter
                 }
                 ]
             });
         }

         //查询的参数
         var queryParams = function (params) {
             var temp = {
                 pageSize: params.limit,                             //行数
                 pageIndex: (params.offset / params.limit) + 1,      //页码
                 staff: $('#Staff').val(),
                 month: $('#Month').val(),
             };
             console.info(temp);
             return temp;
         };

         //刷新表格数据
         var refreshTable = function () {
             $table.bootstrapTable('refresh');
         }
            
         //获取表格高度
         function getHeight() {
             return $(window).height() - 150;
         }

         //重置表格高度
         setTimeout(function () {
             $table.bootstrapTable('resetView');
         }, 200);

         //重置表格高度
         $(window).resize(function () {
             $table.bootstrapTable('resetView', {
                 height: getHeight()
             });
         });

         //刷新按钮
         $('#refreshBtn').click(function (e) {
             $table.bootstrapTable('refresh');
         });

         //搜索按钮
         $('#Search').click(function (e) {
             $table.bootstrapTable('refresh');
         });
        //定位图片显示
         function ImageListFormatter(value, row, index) {
             var scr = "";
             var isLocked = "";
             for (var i = 0; i < value.length; i++) {
                 var datetime = new Date(row.time[i]);
                 var hours = datetime.getHours(); //获取当前小时数(0-23) 
                 var minutes = datetime.getMinutes(); //获取当前分钟数(0-59) 
                 var seconds = datetime.getSeconds(); //获取当前秒数(0-59)
                 var time = hours + ':' + minutes + ':' + seconds;
                 if (row.isLocked[i] == true) {
                     isLocked = "1";
                     scr += '<div style="float:left;margin-left:20px;"><img src="http://300.fang101.com/Images/SideImage/' + value[i] + '" style="width:100px;height:100px;" onclick="maxImage(src,' + isLocked + ',' + row.id[i] + ')" /><div style="color:red;">' + time + '</div></div>';
                 } else {
                     isLocked = "0";
                     scr += '<div style="float:left;margin-left:20px;"><img src="http://300.fang101.com/Images/SideImage/' + value[i] + '" style="width:100px;height:100px;" onclick="maxImage(src,' + isLocked + ',' + row.id[i] + ')" /><div>' + time + '</div></div>';
                 }
             }
             return scr;
         }
        //打卡次数
         function NumberFormatter(value, row, index) {
             var num = 0;
             for (var i = 0; i < row.isLocked.length; i++) {
                 if (row.isLocked[i] == false) {
                     num += 1;
                 }
             }
             return num;
         }
         function maxImage(src, isLocked,id) {
             parent.layer.open({
                 type: 2,
                 title: '外勤图片',
                 shadeClose: true,
                 shade: 0.4,
                 area: ['464px', '650px'],
                 content: '/Organization/OutSide/SratImage?src=' + src + '&&isLocked=' + isLocked + '&&id=' + id,
                 end: function () {
                     //refreshTable();
                 }
             });
         }
         GetDepartment();
         $("#Department").change(function () { GetStaff() });
         function GetDepartment() {
             $("#Department").empty();//清空部门SELECT控件
             $.getJSON("/Organization/InSide/GetDepartmentlist", function (data) {
                 $("<option></option>").val("0").text("总公司").appendTo($("#Department"));
                 $.each(data, function (i, item) {
                     $("<option></option>").val(item["id"]).text(item["name"]).appendTo($("#Department"));
                 })
                 GetStaff();
             });
         }
         function GetStaff() {
             $("#Staff").empty();//清空人员SELECT控件
             $.getJSON(
             "/Organization/InSide/GetStafflist",
             { did: $("#Department").val() },
             function (data) {
                 $("<option></option>").val("").text("全部").appendTo($("#Staff"));
                 $.each(data, function (i, item) {
                     $("<option></option>").val(item["id"]).text(item["name"]).appendTo($("#Staff"));
                 })
             });
         }
        
    </script>

</body>
</html>
